<template>
  <div class="container" :style="gradientStyle">
    <!-- 组件内容 -->
  </div>
</template>

<script setup>
import { ref, computed, defineProps, watch } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const nowAngle = ref(0)

watch(
  () => store.state.flt.rollAngle,
  (newValue, oldValue) => {
    if (newValue != oldValue) {
      if (!props.direction) {
        nowAngle.value = (newValue - 50) * 2 * props.speed
      } else {
        nowAngle.value = (100 - newValue - 50) * 2 * props.speed
      }
      nowAngle.value = nowAngle.value > 100 ? 100 : nowAngle.value
    }
  }
)

const props = defineProps({
  //速度变化
  speed: {
    type: Number,
    default: 2
  },
  direction: {
    type: Boolean,
    default: false //如果是false，则代表左边
  }
})

// 计算属性，动态计算背景样式
const gradientStyle = computed(() => ({
  background: `linear-gradient(to top, #dddddd ${nowAngle.value}%, #dddddd ${nowAngle.value}%, #202127 0%, #202127 100%)`
}))

const addAngle = () => {
  if (nowAngle.value + props.speed <= 100) {
    nowAngle.value += props.speed
  }
}

const minusAngle = () => {
  if (nowAngle.value - props.speed >= 0) {
    nowAngle.value -= props.speed
  }
}

defineExpose({
  addAngle,
  minusAngle
})
</script>

<style scoped>
.container {
  position: relative; /* 必须设置定位，确保其显示在背景图片上方 */
  width: 25px;
  height: 50px;
  background-color: RGB(0, 0, 0);
  z-index: 10; /* 保证该元素位于背景图片的上层 */
  border: 2px solid #dddddd;
  border-radius: 1px;
  margin-left: 1px;
}
</style>
